<template>
	<view class="components-theme">
		<view class="">
			<view class="dong">
				<view class="monster">
					<view class="monster__face">
						<view class="monster__eye avatar-eye avatar-eye--green eye--left">
							<view class="avatar-eye-pupil pupil--green">
								<span class="avatar-eye-pupil-blackThing">
									<span class="avatar-eye-pupil-lightReflection"></span>
								</span>
							</view>
						</view>
						<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
							<view class="avatar-eye-pupil pupil--pink">
								<span class="avatar-eye-pupil-blackThing">
									<span class="avatar-eye-pupil-lightReflection"></span>
								</span>
							</view>
						</view>
						<view class="monster__noses">
							<view class="monster__nose"></view>
							<view class="monster__nose"></view>
						</view>
						<view class="monster__mouth">
							<view class="monster__top"></view>
							<view class="monster__bottom"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 顶部背景 -->
		<view class='UCenter-bg'
			:style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');'">
			<view class='space' v-show="spaceShow">
				<view class="stars ">
					<view class="star "></view>
					<view class="star pink "></view>
					<view class="star blue "></view>
					<view class="star yellow "></view>
				</view>
			</view>
			<block>
				<view class='text-center'>
					<view class="cu-avatar2 round"
						style="overflow: hidden;">
						<image src="/static/image/missing-face.png" mode="aspectFill"></image>
					</view>
					<view class="padding text-blue text-xl text-bold">
						你好，游客
					</view>
			
				</view>
			</block>
			<image
				src='https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/f2c121b4-bd46-4613-ac93-0253e01b9c33.gif'
				mode='scaleToFill' 
				class='gif-wave'>
			</image>
		</view>

		<block>
			<view class='padding flex text-center text-grey bg-white shadow-warp-my'>
				<view @click="toUseLog()" class='flex flex-sub flex-direction solid-right'>
					<view class="text-xxl text-orange">0</view>
					<view class="margin-top-sm">
						剩余次数
					</view>
				</view>
				<view @click="toUsedLog()" class='flex flex-sub flex-direction solid-right'>
					<view class="text-xxl text-blue">0</view>
					<view class="margin-top-sm">
						使用次数
					</view>
				</view>

			</view>
			
			<view class="user-list">
				<u-cell-group>
					<u-cell-item @tap="showModal()" :titleStyle="titleStyle" title="主题切换" :arrow="false">
						<u-icon slot="icon" :size="iconSize" name="/static/icon/zhuti.png" :custom-style="iconCustomStyle"></u-icon>
						<view class='action' solt="right-icon">
							<view class="cu-capsule radius">
								<view class='cu-tag bg-gradual-blue'>
									<view style="clear: both;"></view>
								</view>
								<view class="cu-tag tag-bg">
									{{picName}}
								</view>
							</view>
						</view>
					</u-cell-item>
					
					<button type="default" open-type="share" class="list-item">
						<u-cell-item @click="toQuestion()" :titleStyle="titleStyle" title="分享给好友" :value="share_value">
							<u-icon slot="icon" :size="iconSize" name="/static/icon/lvhang.png" :custom-style="iconCustomStyle"></u-icon>
						</u-cell-item>
					</button>
					
				</u-cell-group>
			</view>
			
			<view class="user-list">
				<u-cell-group>
					<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ -->
						<button type="default" open-type="feedback" class="list-item">
							<u-cell-item :title-style="titleStyle" title="建议反馈">
								<u-icon slot="icon" :size="iconSize" name="/static/icon/chucuo.png" :custom-style="iconCustomStyle"></u-icon>
							</u-cell-item>
						</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
						<button type="default" open-type="contact" class="list-item">
							<u-cell-item :title-style="titleStyle" title="联系客服">
								<u-icon slot="icon" :size="iconSize" name="/static/icon/diannao.png" :custom-style="iconCustomStyle"></u-icon>
							</u-cell-item>
						</button>
					<!-- #endif -->
					
					<u-cell-item @click="copy()" :title-style="titleStyle" title="我要开发">
						<u-icon slot="icon" :size="iconSize" name="/static/icon/xiaoxi.png" :custom-style="iconCustomStyle"></u-icon>
					</u-cell-item>
					
					<u-cell-item @click="toS()" :title-style="titleStyle" title="隐私协议">
						<u-icon slot="icon" :size="iconSize" name="/static/icon/rili.png" :custom-style="iconCustomStyle"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>

		</block>
		
		<!-- 弹窗确认 -->
		<view class="cu-modal" :class="modalName == 'Modal' ? 'show': '' ">
			<view class="cu-dialog" style="padding: 300rpx 0 70rpx;">
				<view class="modal_bg"></view>
				<view class="modal_main">
					<view class='nav-list margin-top'>
						<view :class="'nav-li bg-zt' + (index+1)" v-for="(item, index) in inter" :key="index"
							@click="switchImage(index,item.name)">
							<view class="nav-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				isCheckLogin : true,
				
				phone_height: 657,
				
				iconSize: 50,
				updateUserInfoTime: 0,
				
				spaceShow: true,
				modalName: null,
				picName: '流星之夜',
				pic: [{
					link: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/7143aea0-b724-446b-9aff-8993a4f919b9.jpeg',
					name: '春天'
				}, {
					link: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/e892ac8f-88a4-4d64-8b5c-166897104333.jpeg',
					name: '夏天'
				}, {
					link: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/e8942ebc-7229-4c90-8d17-03792785a82d.jpeg',
					name: '秋天'
				}, {
					link: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/bb5550a9-9a54-4919-a5e3-00b8130a12e7.jpeg',
					name: '冬天'
				}, {
					link: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/810c0f57-44dc-4e25-b52a-158623ad99f8.jpeg',
					name: '幽静'
				}, {
					link: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/63820a7c-4735-492e-a2b5-991bf5f4086e.jpg',
					name: '天空'
				}],
				topBackGroupImageIndex: 5,
				inter: [{
					title: 'mimicry',
					name: '活力春天',
					color: ''
				}, {
					title: 'theme',
					name: '清爽夏日',
					color: ''
				}, {
					title: 'theme',
					name: '金秋之韵',
					color: ''
				}, {
					title: 'theme',
					name: '冬日之阳',
					color: ''
				}, {
					title: 'theme',
					name: '幽兰星空',
					color: ''
				}, {
					title: 'theme',
					name: '流星之夜',
					color: ''
				}],
				
				titleStyle: {
					fontSize: '32rpx'
				},
				iconCustomStyle: {
					marginRight: '20rpx',
				},
				iconSize: 50,
				share_value: '推荐一位好友奖励2次次数',
			}
		},
		methods: {
			copy(){
				let wechat = '304587661'
				uni.showModal({
					title: '联系作者',
					content: '联系方式:' + wechat,
					success: function (res) {
					}
				});
			},
			toS(){
				uni.navigateTo({
					url: '/pages/secret/secret'
				})
			},
			showModal() {
				this.modalName = 'Modal'
			},
			switchImage(index, name) {
				this.topBackGroupImageIndex = index;
				this.modalName = null;
				this.picName = name;
			},
			toUseLog(){
				uni.navigateTo({
					url: '/pages/my/log',
				})
			},
			toUsedLog(){
				uni.navigateTo({
					url: '/pages/my/usedLog',
				})
			},
		},
		onLoad(options){
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.phone_height = res.windowHeight
				}
			})
		},
		onUnload() {
			
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss" scoped>
	 .ad-view {
	    background-color: #FFFFFF;
	    margin-bottom: 10px;
	  }
	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	.text-center{
		 text-align: center;
	}
	// 头像
	.cu-avatar2 {
		border-radius: 50%;
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 180rpx;
		height: 180rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}
	.flex {
	    display: flex;
	}
	.flex-sub {
	    flex: 1;
	}
	.flex-direction {
	    flex-direction: column;
	}
	.solid-right{
		position: relative;
	}
	.bg-white, .line-white, .lines-white {
	    background-color: #ffffff;
	    color: #666666;
	}
	.text-blue, .line-blue, .lines-blue{
		color: #0081ff;
	}
	.text-grey, .line-grey, .lines-grey{
	    color: #8799a3;
	}
	.text-black, .line-black, .lines-black{
	    color: #333333;
	}
	.text-orange, .line-orange, .lines-orange {
	    color: #f37b1d;
	}
	.text-bold {
	    font-weight: bold;
	}
	.text-xl {
	    font-size: 36rpx;
	}
	.text-xxl {
	    font-size: 44rpx;
	}
	.padding {
	    padding: 30rpx;
	}
	.name {
		text-shadow: 2px 2px 1px #2f9bfe;
	}

	.dialog2 {
		background: none;
	}

	.saicode {
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.img-big image {
		top: -40px;
		width: 280rpx;
		height: 280rpx;
	}


	.shadow-me {
		box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
	}

	.my_logo {
		background: none;
		padding: 50rpx 0 30rpx 0;
	}

	.my-radius {
		border-radius: 12rpx;
		overflow: hidden
	}

	.my-icon image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0 auto
	}

	.my-iconcolor {
		background: rgba(255, 255, 255, 0.96)
	}

	.shadow-shop {
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.qrcode-img {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 350rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none
	}


	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}

	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}


	.bg-product {
		background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
		color: #fff;
	}

	.margin-bottom-my {
		margin-bottom: 150rpx;
	}

	.giteeClass {
		margin-top: 30rpx;
		font-size: 34rpx;
		color: #2440B3;
		text-decoration: underline;
	}

	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
	}

	.modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -100rpx;
		background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9225cf9c-812a-460f-a2e6-59b295dc56e4/82d1320e-245c-4e22-b950-aa24e98142f3.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.modal_main {
		background-color: #FFFFFF;
	}

	/* 主题色 */
	.bg-zt1 {
		color: #fff;
		background: #81d949;
	}

	.bg-zt2 {
		color: #fff;
		background: #b2e6ff;
	}

	.bg-zt3 {
		color: #fff;
		background: #f3cd41;
	}

	.bg-zt4 {
		color: #fff;
		background: #ddecf7;
	}

	.bg-zt5 {
		color: #fff;
		background: #152e9d;
	}

	.bg-zt6 {
		color: #fff;
		background: #0f1358;
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}

	.nav-li {
		padding: 22upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-image: url(/static/image/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}

	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		position: relative;
	}

	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}

	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}

	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}

	// 好玩动态
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);
	}

	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}

	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}

	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}

	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}

	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}

	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}

	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}

	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}


	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}

	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}


	.eye--left {
		left: 10%;
	}

	.eye--right {
		left: 85%;
	}

	.eye--center {
		left: 45%;
		top: 10%;
	}

	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}


	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}

	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}


	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}

	/**/
	@keyframes t {

		0%,
		10%,
		80%,
		100% {
			top: -30px;
		}

		20% {
			top: 0px;
		}

		30% {
			top: -20px;
		}

		40% {
			top: -0px;
		}

		50% {
			top: -25px;
		}

		70% {
			top: 0px;
		}
	}

	@keyframes b {

		0%,
		10%,
		80%,
		100% {
			bottom: -30px;
		}

		20% {
			bottom: 0px;
		}

		30% {
			bottom: -20px;
		}

		40% {
			bottom: -0px;
		}

		50% {
			bottom: -25px;
		}

		70% {
			bottom: 0px;
		}
	}

	@keyframes mouth {

		0%,
		10%,
		100% {
			width: 100%;
			height: 0%;
		}

		15% {
			width: 90%;
			height: 30%;
		}

		20% {
			width: 50%;
			height: 70%;
		}

		25% {
			width: 70%;
			height: 70%;
		}

		30% {
			width: 80%;
			height: 60%;
		}

		35% {
			width: 60%;
			height: 70%;
		}

		40% {
			width: 55%;
			height: 75%;
		}

		45% {
			width: 50%;
			height: 90%;
		}

		50% {
			width: 40%;
			height: 70%;
		}

		55% {
			width: 70%;
			height: 95%;
		}

		60% {
			width: 40%;
			height: 50%;
		}

		65% {
			width: 100%;
			height: 60%;
		}

		70% {
			width: 100%;
			height: 70%;
		}

		75% {
			width: 90%;
			height: 70%;
		}

		80% {
			width: 50%;
			height: 70%;
		}

		85% {
			width: 90%;
			height: 50%;
		}

		85% {
			width: 40%;
			height: 70%;
		}

		90% {
			width: 90%;
			height: 30%;
		}

		95% {
			width: 100%;
			height: 10%;
		}
	}

	@keyframes tongue {

		0%,
		20%,
		100% {
			bottom: -80px;
		}

		30%,
		90% {
			bottom: -40px;
		}

		40% {
			bottom: -45px;
		}

		50% {
			bottom: -50px;
		}

		70% {
			bottom: -80px;
		}

		90% {
			bottom: -40px;
		}
	}


	// 顶部流星
	.space {
		position: absolute;
		top: 0;
		left: 0;
	}

	.planet {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: #333;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -75rpx 0 0 -75rpx;
		overflow: hidden;
		z-index: 2;
	}

	.planet_shadow {
		position: absolute;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		top: -40%;
		right: -10%;
		border: 35rpx solid rgba(0, 0, 0, .15);
	}

	.star {
		display: block;
		width: 5rpx;
		height: 5rpx;
		border-radius: 50%;
		background: #FFF;
		top: 100rpx;
		left: 400rpx;
		position: relative;
		transform-origin: 100% 0;
		animation: star-ani 6s infinite ease-out;
		box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2;
	}

	.star:after {
		content: '';
		display: block;
		top: 0rpx;
		left: 4rpx;
		border: 0rpx solid #fff;
		border-width: 0rpx 90rpx 2rpx 90rpx;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
		box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
		transform-origin: 0% 100%;
		animation: shooting-ani 3s infinite ease-out;
	}

	.pink {
		top: 30rpx;
		left: 395rpx;
		background: #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.pink:after {
		border-color: transparent transparent transparent #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.blue {
		top: 35rpx;
		left: 432rpx;
		background: cyan;
		animation-delay: 7s;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
	}

	.blue:after {
		/* border-color: transpareanimation-delay: 12s; */
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		animation-delay: 7s;
	}

	.yellow {
		top: 50rpx;
		left: 600rpx;
		background: #ffcd5c;
		animation-delay: 5.8s;
	}

	.yellow:after {
		border-color: transparent transparent transparent #ffcd5c;
		animation-delay: 5.8s;
	}

	@keyframes star-ani {
		0% {
			opacity: 0;
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		}

		50% {
			opacity: 1;
			transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
		}

		100% {
			opacity: 0;
			transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
		}
	}
	
	.user-list{
		margin: 30upx;
		background: #fff;
		border-radius: 10upx;
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	.list-item{
		width: 100%;
		padding: 0rpx;
		background-color: #FFFFFF !important;
		border: initial;
		text-align: initial;
	}
	.list-item::after{
		border: initial;
	}
	
	.cu-tag {
	    font-size: 24rpx;
	    vertical-align: middle;
	    position: relative;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	    box-sizing: border-box;
	    padding: 0rpx 16rpx;
	    height: 48rpx;
	    font-family: Helvetica Neue, Helvetica, sans-serif;
	    white-space: nowrap;
	}
	.bg-gradual-blue {
	    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
	    color: #ffffff;
	}
	.tag-bg {
	    background-color: #f1f1f1;
	}
	.radius {
	    border-radius: 6rpx;
	}
	
</style>
